<template>
  <div class="theUser">
    <template v-if="this.$route.path == '/theUser'">
      <div class="main-title">用户列表</div>
      <div class="user_big">
        <div class="states_b">
          <div class="container">
            <div class="row">
              <div class="col col-xxl-9 col-xl-9 col-lg-12 col-md-12">
                <div class="b_b">
                  <search-input @searchOn="onSearch" @clearChange="clearChange"></search-input>
                  <el-select v-model="value" clearable placeholder="全部状态" style="width: 230px;margin-right: 15px;" @change="changeOption">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                  <el-date-picker
                    type="date"
                    clearable
                    @change="changePickerDay"
                    :picker-options="setMonthDisableds"
                    v-model="pickerDay"
                    placeholder="选择查询创建时间">
                  </el-date-picker>
                  <!-- addUserMaGou() 接口-->
                  <!-- <el-select v-model="machine" clearable placeholder="请选择机构" style="width: 230px;" @change="changeMachine" @clear="clearMachine">
                    <el-option v-for="item in optionsEmachine" :key="item.iname" :label="item.iname" :value="item.iname"> </el-option>
                  </el-select> -->
                </div>
              </div>
              <div class="col col-xxl-3 col-xl-3 col-lg-12 col-md-12">
                <div class="b_c">
                  <el-button @click="jumpPage('add')" class="addNew">新增</el-button>
                  <el-button @click="jumpPage('limit')" :disabled="newSelection.length == 0" v-if="isShow" class="xianZhi">限制</el-button>
                  <el-button @click="jumpPage('Inlimit')" style="text-align: center;" :disabled="newSelection.length == 0" v-else class="jieChu">解除</el-button>
                  <!-- <el-button @click="jumpPage('limit')" :disabled="newSelection.length == 0">限制</el-button> -->
                </div>
              </div>
            </div>
          </div>
        </div>

        <el-table stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :header-cell-style="{ background: '#f2f2f2', color: '#333', fontWeight: 600 }" @select="selectChange" @select-all="selectAllChange" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column label="微信昵称" align="left" width="230" show-overflow-tooltip>
            <template slot-scope="scope">
              <img :src="scope.row.img" style="width: 60px;height: 60px;margin-right: 10px;border-radius: 50%;">
              {{ scope.row.nickname == null || scope.row.nickname == '' ? '--' : scope.row.nickname }}
            </template>
          </el-table-column>
          <el-table-column label="用户名" align="center" width="170" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.name == null || scope.row.name == '' ? '--' : scope.row.name }} </template>
          </el-table-column>
          <el-table-column label="真实姓名" align="center" width="170" show-overflow-tooltip>
            <template slot-scope="scope"> {{ scope.row.zhename == null || scope.row.zhename == '' ? '--' : scope.row.zhename }} </template>
          </el-table-column>
          <el-table-column label="手机号" align="center">
            <template slot-scope="scope"> {{ scope.row.phone == null || scope.row.phone == '' ? '--' : scope.row.phone }} </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span class="scope_span1">{{ scope.row.status === 1 ? '● 正常' : '' }}</span>
              <span class="scope_span2">{{ scope.row.status === 2 ? '● 限制' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属机构" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="scope_span1">{{ scope.row.iname == '个人' ? '● 个人' : scope.row.iname == null ? '--' : '● ' + scope.row.iname + '机构' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="累计学习时长" align="center">
            <!--  || scope.row.zhang == '00小时00分00秒' -->
            <template slot-scope="scope"> {{ scope.row.zhang == null || scope.row.zhang == 'NaN秒' ? '--' : scope.row.zhang }} </template>
          </el-table-column>
          <el-table-column prop="createDate" label="创建时间" align="center">
            <template slot-scope="scope">{{ scope.row.createDate === null || scope.row.createDate === '' ? '--' : scope.row.createDate }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="threeGeneral(scope.$index, scope.row, 'details')">详情</el-button>
              <!-- <el-button size="mini" type="text" :disabled="!newTableData.includes(scope.row)" @click="threeGeneral(scope.$index, scope.row, 'limit')">限制</el-button>
              <el-button size="mini" type="text" :disabled="!newTableData.includes(scope.row)" @click="threeGeneral(scope.$index, scope.row, 'Jielimit')">解除限制</el-button> -->
              <el-button size="mini" type="text" :disabled="!newTableData.includes(scope.row)" v-if="scope.row.status === 1" @click="threeGeneral(scope.$index, scope.row, 'limit')">限制</el-button>
              <el-button size="mini" type="text" :disabled="!newTableData.includes(scope.row)" v-else @click="threeGeneral(scope.$index, scope.row, 'Jielimit')">解除</el-button>
              <el-button size="mini" type="text" @click="threeGeneral(scope.$index, scope.row, 'resets')" style="color: #ff4949 !important;">重置</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total"> </el-pagination>
      </div>
    </template>

    <transition name="transitionName">
			<router-view clss="index-main" />
    </transition>

  </div>
</template>

<script>
import searchInput from '../../components/search/search.vue';
import { timestampToTimeShi, timestampToTime, timestampToTimeSa } from '../../utils/util';
export default {
  components: { searchInput },
  data() {
    return {
      options: [ { value: '正常', label: '正常' }, { value: '限制', label: '限制' } ],
      value: '',
      machine: '', // 机构
      optionsEmachine: [], //机构选项
      tableData: [], //列表数据
      newTableData: [],
      pageSize: 0,
      total: 0,
      currentPage: 1,
      time: null, //搜索防抖
      newSelection: [], //表格选中那一个新数组
      xiaLaKuang: '',
      sou: {
        souSuo: '',
        zhuangTai: '',
        iname: '',
        day1: '',
        day2: ''
      },
      isShow: true,  // 控制右上角限制和解除限制的显示隐藏
      pickerDay: '', 
      setMonthDisableds: {  // 自然年限制大于当前年不可选
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        this.userList() // 返回页面后自动刷新
      },
      deep: true        // 深度观察监听
    },
    xiaLaKuang: {
      handler: function(val, oldVal) {
        if(timestampToTime(new Date()).split(' ')[0] == timestampToTime(this.pickerDay).split(' ')[0]) {
          sessionStorage.removeItem("Today");// this.pickerDay = '';
        }
      }
    }
  },
  created() {
    var _this = this;
    // console.log(sessionStorage.getItem('Today'), timestampToTime(new Date()).split(' ')[0],timestampToTimeSa(new Date()).split(' ')[0]);
    if(sessionStorage.getItem('Today') == 'Today') {
      const newDate = timestampToTime(new Date()).split(' ')[0];
      // const newDateY = timestampToTimeSa(new Date()).split(' ')[0];
      _this.$http.theUser.theUserList({minDate: newDate, maxDate: newDate}).then( res => {
        _this.tableData = res.data;
        _this.pageSize = res.size;
        _this.total = res.total;
        _this.currentPage = res.currentPage;
        _this.gongGongStudent();
        _this.pickerDay = newDate;
      })
    } else {
      _this.userList()
    }
    // _this.jiGou() // 机构下拉
  },
  methods: {
    // 列表
    userList() {
      this.$http.theUser.theUserList().then( res => {
        this.tableData = res.data;
        this.pageSize = res.size;
        this.total = res.total;
        this.currentPage = res.currentPage;
        this.gongGongStudent();
      })
    },
    // 更改公共的累计学习时长h
    gongGongStudent(time){
      this.tableData.filter( item => { item.zhang = timestampToTimeShi(item.zhang); })
    },
    // 搜索this.fenYe(val, this.sou.souSuo, this.sou.zhuangTai, this.sou.iname, this.sou.day1 || '', this.sou.day1 || '')
    onSearch(data) {
      this.sou.souSuo = data;
			this.currentPage = 1;
			this.userSearch(this.currentPage,data,this.sou.zhuangTai,'',this.sou.day1,this.sou.day1);
    },
    // 点击清除按键触发该函数
    clearChange() {
			this.currentPage = 1;
      this.sou.souSuo = '';
			this.userSearch(this.currentPage,'',this.sou.zhuangTai,'',this.sou.day1,this.sou.day1);
    },
    //  全部状态下拉框
    changeOption(val) {
			val = val == '正常' ? '1' : val == '限制' ? '2' : '';
      this.sou.zhuangTai = val;
			if(val != '') {
				this.currentPage = 1;
				this.userSearch(this.currentPage,this.sou.souSuo,val,'',this.sou.day1,this.sou.day1);
			} else {
				this.currentPage = 1;
				this.userSearch(this.currentPage,this.sou.souSuo,'','',this.sou.day1,this.sou.day1);
			}
    },
		// 选择时间
    changePickerDay(val){
      this.sou.day1 = timestampToTime(val).split(' ')[0];
			if(val != null) {
				this.currentPage = 1;
				this.userSearch(this.currentPage,this.sou.souSuo,this.sou.zhuangTai,'',this.sou.day1,this.sou.day1);
			} else {
				this.currentPage = 1;
				this.sou.day1 = '';
				this.userSearch(this.currentPage,this.sou.souSuo,this.sou.zhuangTai,'','','');
			}
    },
    // 表格单选
    selectChange(selection, row) { this.newTableData = selection },
    // 表格全选
    selectAllChange(selection) { this.newTableData = selection },
    //  表格选中那一个新数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.newSelection = val;
      this.newSelection.filter( item => {
        if(item.status == 2) {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
      })
    },
    // 操作里的详情/限制/重置/接触限制
    threeGeneral(index, row, variable) {
      if (variable == 'details') {  // console.log(index, row, variable)//  详情
        sessionStorage.setItem('userData', JSON.stringify(row))
        this.$router.push({ name: 'userDetails' })
      } else if (variable == 'resets') {
        //重置
        this.$http.theUser.resetList({ id: row.id }).then(result => {
          this.$notify({
            title: '该用户密码已重置，恢复至默认',
            message: '默认密码为：000000',
            type: 'success'
          })
        })
      } else if(variable == 'limit') {// 限制
        this.$http.theUser.limitList({ id: row.id }).then(result => { this.userList(); })
      } else if(variable == 'Jielimit') {// 解除限制
        this.$http.theUser.theUpdateContent({id: row.id}).then( res => { this.userList(); })
      }
    },
    // 新增
    jumpPage(val) {
      if (val == 'add') {
        this.$router.push({ name: 'newUsers', params: { add: 'add' } })
      } else if(val == 'limit'){
        this.$confirm('限制后当期机构下的所有账号将不可登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const a = []
          this.newSelection.filter(r => {
            a.push(r.id)
          })
          this.$http.theUser.resetRigheXz({ ide: a.toString() }).then(res => {
            this.$message({
              type: 'success',
              message: '限制成功!'
            })
            this.userList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消限制'
          })
        })
      } else if(val == 'Inlimit') {
        this.$confirm('解除限制后当期机构下的所有账号将可登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 解除限制
          const a = []
          this.newSelection.filter(r => {
            a.push(r.id)
          })
          this.$http.theUser.theUpdateMcontact({ ide: a.toString() }).then( res => {
            if(res.code == 0) {
              this.$message({
                type: 'success',
                message: '限制成功!'
              })
              this.userList();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消限制'
          })
        })
      }
    },
    // 分页
    handleSizeChange(val) {
      this.currentPage = val
    },
    handleCurrentChange(val) {
      this.currentPage = val;
			this.userSearch(val,this.sou.souSuo,this.sou.zhuangTai,'',this.sou.day1,this.sou.day1);
    },
    // 用户搜索列表
    userSearch(val, souSuo, zhuangTai, iname, minDate) {
      this.$http.theUser.theUserList({page: val,name: souSuo,status: zhuangTai,iname,minDate,maxDate: minDate}).then( res => {
        this.tableData = res.data;
        this.total = res.total;
        this.currentPage = res.currentPage;
        this.gongGongStudent();
      })
    },
    // 这个是机构下拉---------------------------------------------------------------------------------------------------
    jiGou() {
      this.$http.theUser.addUserMaGou().then(res => {
        this.optionsEmachine = res.data
      })
    },
    // 下拉机构选择请求
    changeMachine(val) {
      this.sou.iname = val
      this.currentPage = 1;
      this.sou.day1 = this.sou.day2 = '';
      this.userSearch(this.currentPage, this.sou.souSuo, this.sou.zhuangTai, val, this.sou.day1, this.sou.day1)
    },
    // 下拉机构清除
    clearMachine() {
      this.currentPage = 1;
      this.userSearch(this.currentPage, this.sou.souSuo, this.sou.zhuangTai, '', this.sou.day1 || '', this.sou.day1 || '')
    },
    // -------------------------------------------------------------------------------------------------------------------
  }
}
</script>

<style scoped>
@import '../../assets/css/theUser/theUser.scss';
</style>
